<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 第一行 标题时间-->
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" :color="[datavColors[1],datavColors[0]]"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="[datavColors[0],decorationColors[1]]" />
            <div class="title">
              <span class="title-text" @click="changeTheme">{{ title }}</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="datavColors"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="[datavColors[0],decorationColors[1]]"
            />
          </div>
          <div class="time">
            <dv-decoration-10 class="dv-dec-10-s" :color="[datavColors[1],datavColors[0]]" />
            
            <span class="text" >
              <i class="iconfont icon-yingyong pointer" @click="backHome"/>
              {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
              {{ timeInfo.dateDay }}
            </span>
            
          </div>
        </div>
        <!-- 第二行 导航栏 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div :class="[reactLeft, ml3, reactLs,active == 0?choosed:'']" @click="tabChange(0)">
              <span class="react-before"></span>
              <span class="text">{{ subtitle[0]}}</span>
            </div>
            <div :class="[reactLeft, ml3, reactLs,active == 1?choosed:'']" @click="tabChange(1)">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width jc-end">
            <div :class="[reactRight, mr3, reactLs,active == 2?choosed:'']" @click="tabChange(2)">
              <span class="text">{{ subtitle[2] }}</span>
            </div>
            <div :class="[reactRight, mr3, reactLs,active == 3?choosed:'']" @click="tabChange(3)">
              <span class="react-after"></span>
              <span class="text">{{ subtitle[3] }}</span>
            </div>
          </div>
        </div>
        <div class="body-box">
          <overview v-if="active == 0"></overview>
          <teaching v-else-if="active == 1"></teaching>
          <device v-else-if="active == 2"></device>
          <general-affairs v-else></general-affairs>
        </div>
      </div>
    </div>
    <camera />
    <m3u8 />
  </div>
</template>

<script lang="ts">
import {defineComponent,ref,computed,reactive,onMounted,onUnmounted,} from 'vue'
import { useStore } from 'vuex'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import {subtitle} from '@/constant/index'
import Overview from "../overview/index.vue"
// import Teaching from "../teaching/index.vue"
import Teaching from "../teaching_new/index.vue"
import Device from "../device/index.vue"
import generalAffairs from "../generalAffairs/index.vue"
import { building } from '@/public/request/http'
import camera from '@/components/cameraPlay/index.vue'
import m3u8 from '@/components/cameraPlay/m3u8Play.vue'
import Setting from "@/public/config"

export default defineComponent({
  components: {
    Overview,
    Teaching,
    Device,
    generalAffairs,
    camera,
    m3u8
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors)
    const store = useStore();

    const title = ref('数据驾驶舱')
    // * 颜色
    const decorationColors = ['#568aea', 'none']
    // * 加载标识
    const loading = ref<boolean>(true)
    const active = ref<number>(0)
    const reactLeft = ref('react-left')
    const reactRight = ref('react-right')
    const reactLs= ref('react-l-s')
    const ml3= ref('ml-3')
    const mr3= ref('mr-3')
    const choosed = ref('choosed')
    // * 时间内容
    const timeInfo = reactive({
      setInterval: null,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })

    //

    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    // 生命周期
    onMounted(() => {
      getBuilding()
      cancelLoading()
      handleTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()
    })

    const getBuilding = async () => {
      const res = await building()
    }

    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)
    })

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 2000)
    }

    const theme = ref(0)

    const changeTheme = () => {
      if(theme.value >= 1){
        theme.value = 0
      }else{
        theme.value ++
      }
      if(theme.value == 0){
        document.body.style.setProperty('--bg', `url(${require('@/assets/pageBg_0.png')})`)
        document.body.style.setProperty('--iconfont', '#5cd9e8')
        document.body.style.setProperty('--textShadow', '0 0 1px #fff,0 0 3px #fff, 0 0 5px #00a67c,0 0 7px #00a67c')
        document.body.style.setProperty('--boxShadow', 'rgba(25, 131, 224, 0.48) 3px 1px 8px 0px, rgba(25, 131, 224, 0.48) -3px -1px 8px 0px')
        document.body.style.setProperty('--boxHover', 'rgba(88, 143, 190, 0.48) 3px 1px 8px 0px, rgba(88, 143, 190, 0.48) -3px -1px 8px 0px')
        store.commit('changeDatavColors',['rgb(46, 96, 153)','rgb(124, 231, 253)'])
        store.commit('changeTheme',0)
        title.value = '数据驾驶舱'
      }else{
        document.body.style.setProperty('--bg', `url(${require('@/assets/pageBg_1.png')})`)
        document.body.style.setProperty('--iconfont', '#ff0000')
        document.body.style.setProperty('--textShadow', '0 0 1px #fff,0 0 3px #fff, 0 0 5px #a62700,0 0 7px #a62700')
        document.body.style.setProperty('--boxShadow', 'rgba(224, 55, 25, 0.48) 3px 1px 8px 0px, rgba(224, 55, 25, 0.48) -3px -1px 8px 0px')
        document.body.style.setProperty('--boxHover', 'rgba(190, 100, 88, 0.48) 3px 1px 8px 0px, rgba(190, 100, 88, 0.48) -3px -1px 8px 0px')
        store.commit('changeDatavColors',['rgb(153, 46, 46)','rgb(255, 145, 145)'])
        store.commit('changeTheme',1)
        title.value = '可视化大屏'
      }
    }

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    const tabChange = (val: any) => {
      active.value = val
    }

    const backHome = () => {
      location.href = Setting.SelfHost + Setting.Ports.BackendAdmin +"/user/login";
    }

    // return
    return {
      loading,
      active,
      timeInfo,
      appRef,
      title,
      subtitle,
      decorationColors,
      reactLeft,
      reactRight,
      reactLs,
      ml3,
      mr3,
      choosed,
      theme,
      datavColors,
      changeTheme,
      tabChange,
      backHome
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
</style>
